<script setup>
// 你是子组件
import { onMounted, nextTick, ref, reactive, watch, toRefs, onBeforeMount, toRef, onUpdated } from 'vue'
import mitt from '../assets/js/mitt';
const props = defineProps({
  num: {
    type: Number,
    default: 100
  },
  data: {
    type: Number,
    default: 100
  }
})
const { num, data } = toRefs(props)
watch(data, (o, n) => {
  console.log(n, 1);
  data.value = 0
})

const inp = ref(222)
const obj1 = reactive({ name: "2323", age: 65 })
let str2 = toRef(obj1, "name")
const mittNum = ref(0)
onMounted(() => {
  // setInterval(() => {
  //   console.log(data.value);
  // }, 1000)
  console.log("a Mounted");
  mitt.on("test1", data => {
    console.log("a", data);
    mittNum.value = data
  })
})
onBeforeMount(() => {
  // console.log("a Before");
  mitt.off('test1');
});

onUpdated(() => {
  console.log("zi update");
})

const age = ref(12),
  isShow = ref(true),
  tabAge = () => {
    isShow.value = !isShow.value
  }
</script>

<template>
  <div id="contain">
    AAA
    <button @click="tabAge">切换</button>
    <!-- <Transition name="age"> -->
      <p class="age" v-if="isShow">{{ age }}</p>
    <!-- </Transition> -->
    <div>
      {{ num }}

    </div>
    <div>
      mitt:{{ mittNum }}
      <el-input v-model="str2" placeholder="" size="normal" clearable @change=""></el-input>
      {{ str2 }}
      <!-- <el-input v-model="props.data" placeholder="" size="normal" clearable @change=""></el-input> -->

    </div>
    <el-input v-model="inp" placeholder="" size="normal" clearable @change=""></el-input>

    <button @click="testFun">子组件按钮</button>
    <slot></slot>
  </div>
</template>

<style lang='less' scoped>
#contain {
  display: flex;
  flex-direction: column;
  border: 1px solid tomato;
  background-color: aquamarine;

  button {
    height: 50px;
    width: 160px;
    background-color: antiquewhite;
    border-color: aqua;
  }

  :slotted(button) {
    background-color: aquamarine;
  }

  .age-enter-from,
  .age-leave-to
   {
    opacity: 0;
  }

  .age-enter-active,
  .age-leave-active {
    transition: opacity 0.5s ease;
  }
  .age{
    background-color: aqua;
    height: 50px;
    width: 200px;
    transition: all 0.5s ease;
    &:hover{
      height: 100px;
      width: 400px;
    }
  }
}
</style>